<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="" prop="searchValue">
          <el-input v-model="queryParams.searchValue" placeholder="会员昵称/姓名/手机号" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="注册时间" prop="data">
          <el-date-picker clearable size="small" v-model="date" type="daterange" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="listBox">
      <div class="listBox_head" style="margin-bottom: 14px;">
        <el-button type="primary" @click="addBlackList">新增黑名单</el-button>
        <export-excel-button title="黑名单列表" action="/userManager/customer/black/export" :params="ExportParams" />
      </div>
      <el-table v-loading="loading" :data="customerList" stripe border>
        <el-table-column label="序号" type="index" width="60" align="center" fixed />
        <el-table-column label="会员昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
        <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="手机号码" align="center" prop="phoneNumber" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="会员等级" align="center" prop="levelType" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <dict-tag :options="levelTypeList" :value="scope.row.levelType" />
            </template>
          </el-table-column> -->
        <el-table-column label="预付卡数量" align="center" prop="cardNum" :show-overflow-tooltip="true">
          <!-- <template slot-scope="scope">
              <div>{{}}</div>
            </template> -->
        </el-table-column>
        <el-table-column label="数字权益卡数量" align="center" prop="assetUsable" :show-overflow-tooltip="true" />
        <el-table-column label="预付卡购卡金额" align="center" prop="payMoney" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row.payMoney != '-'">￥{{scope.row.payMoney}}</div>
            <div v-else>{{scope.row.payMoney}}</div>
          </template>
        </el-table-column>
        <el-table-column label="权益卡购卡金额" align="center" prop="equityCardMoney" :show-overflow-tooltip="true" />
        <el-table-column label="日常消费累计金额" align="center" prop="dailyMoney" :show-overflow-tooltip="true" />
        <el-table-column label="注册时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
        <el-table-column label="推荐人" align="center" prop="referrerNickName" :show-overflow-tooltip="true" />
        <el-table-column label="来源" align="center" prop="source" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row.source == 1">神椰</div>
            <div v-else-if="scope.row.source == 2">卡包</div>
            <div v-else-if="scope.row.source == 3">抖音</div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column label="功能限制" align="center" prop="limitType" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="limitations(scope.row)">
              功能限制</el-button>
            <el-button size="mini" type="text" @click="deleteBlackLs(scope.row.id)">删除黑名单</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

    </div>
    <Dialog ref="dialog" @refresh="getList"></Dialog>
  </div>

</template>

<script>
  import {
    blackList,
    addBlackList,
    deleteBlackList,
    exportCustomer,
    adminDict
  } from "@/api/members";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  import Dialog from "@/views/members/blacklist/dialog";
  export default {
    name: "Customer",
    components: {
      ExportExcelButton,
      Dialog
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 会员列表表格数据
        customerList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          searchValue: null,
          startDate: '',
          endDate: '',
          source: null,
          levelType: null,
        },
        date: [],
        levelTypeList: [],
        sourceList: []
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      //   this.getlinkagelist()
      this.getSourcelist()
      this.getList();
    },
    methods: {
      getlinkagelist() {
        //获取商户类型字典
        const params = {
          dictType: "customer_level_type",
        };
        adminDict(params).then((res) => {
          this.levelTypeList = res.result[0].dictList;
        });
      },
      //获取渠道来源字典
      getSourcelist() {
        const params = {
          dictType: "bee_customer_source",
        };
        adminDict(params).then((res) => {
          this.sourceList = res.result[0].dictList;
        });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        if (this.date) {
          this.queryParams.startDate = this.date[0]
          this.queryParams.endDate = this.date[1]
        }
        blackList(this.queryParams).then(response => {
          this.total = response.total
          this.customerList = response.rows
          // this.customerList = this.customerList.map(item => {
          //   Object.keys(item).forEach(key => {
          //     if (item[key] === '') {
          //       item[key] = '-'
          //     }
          //   })
          //   return item
          // })
          console.log('this.customerList', this.customerList)
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        this.date = []
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },
      /** 新增黑名单按钮操作 */
      addBlackList() {
        this.$prompt('用户手机号', '新增黑名单', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
          // inputErrorMessage: '手机号格式不正确'
        }).then(({
          value
        }) => {
          const data = {
            phone: value,
          };
          addBlackList(data).then((res) => {
            this.$message({
              type: 'success',
              message: '添加成功'
            });
            this.resetQuery()
          });
        }).catch(() => {

        });
      },
      /** 功能限制按钮操作 */
      limitations(row) {
        this.$refs.dialog.open(row);
      },
      /** 删除黑名单按钮操作 */
      deleteBlackLs(id) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteBlackList(id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.resetQuery()
          });
        }).catch(() => {});
      },
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

</style>
